<template>
  <div class="home">
      <Nav></Nav>
    <!--内容-->
      <div>
          <el-carousel indicator-position="outside" :height="height+'px'">
              <el-carousel-item v-for="(item,index) in imageList" :key="index">
                  <img :src="item.url" style="width:100%;height: 100% ">
              </el-carousel-item>
          </el-carousel>
          <div class="advertising">
              <span>
                  <h3>我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</h3>
              </span>
              <span>
                  <el-button type="info" plain size="medium">联系我们</el-button>
              </span>
          </div>
          <div class="wallpaper">
              <div class="title">
                    <img src="../images/zhua.png"/>
                    <div style="font-weight: 800;font-size: 30px;">
                        <span>——</span>
                            我们的服务
                        <span>——</span>
                    </div>
                  <p style="color: #666666">美好的陪伴来自温暖的生命</p>
                  <img src="../images/gou.png" style="width: 100%">
              </div>
              <div class="carousel-bg">
                    <div class="variety">
                        <p style="margin: 0 0 20px;">动物是人类的朋友。在这里，每一个热爱宠物的人<br>
                        不但能找到他们想要的，而且能得到比他们想要的更多。</p>
                    </div>
                    <div class="flaunt"></div>
              </div>
              <div class="Introduction">
                    <div class="equipment">
                        <div class="title">
                            <img src="../images/zhua.png"/>
                            <div style="font-weight: 800;font-size: 30px;">
                                <span>——</span>
                                我们的保障
                                <span>——</span>
                            </div>
                        </div>
                    </div>
                    <div class="team">
                        <div class="each" v-for="(item,index) in guarantee" :key="index">
                            <div><img :src="item.url"></div>
                            <h3 class="emptyElement">{{item.title}}</h3>
                            <p style="margin-top: 15px;color: #666666">{{item.content}}</p>
                        </div>
                    </div>
              </div>
              <div class="commercial">
                  <div style="height: 100%;padding:70px 60px;background-color: rgba(249, 239, 207, 0.28);">
                      <h2 style="color: #ffffff;text-align:center;font-weight: 200;font-size: 30px">宠物之恋，在于关爱，让你的爱宠享受家的感觉</h2>
                  </div>
              </div>
              <div class="ourTeam">
                  <div class="title">
                      <img src="../images/zhua.png"/>
                      <div style="font-weight: 800;font-size: 30px;">
                          <span>——</span>
                          我们的团队
                          <span>——</span>
                      </div>
                      <p style="color: #666666">凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程</p>
                  </div>
              </div>
              <div class="personnel">
                  <div  v-for="(item,index) in crew" :key="index" style="width: 230px">
                      <div class="through">
                          <img class="dim" :src="item.url" style="width: 100%;">
                      </div>
                      <div style="padding: 20px;border: 1px solid #eeeeee;background: white">
                          <div style="color: #f1ad48;font-size: 18px">{{item.name}}</div>
                          <p style="display: flex;flex-wrap: wrap;width: 200px;color:#666666">{{item.presentation}}</p>
                      </div>
                  </div>
              </div>
            <!-- 轮播图没有写-->
              <div></div>
          <!-- 关于我们 -->
              <div class="aboutUs">
                  <img src="../images/dog.png" style="height: 240px">
                  <div class="understand">
                      <h3>动物是人类的朋友</h3>
                      <p>从分享你我的养宠心情到爱宠人之间的经验交流，从网上购物到在线医疗，宠物生活中涉及的方方面面，都在不断努力将它们做到最好。在这里，每一个热爱宠物的人，不但能找到他们想要的，而且能得到比他们想要的更多。</p>
                      <div>
                          <button>11111</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Nav from '@/components/Nav.vue'

export default {
  name: 'Index',
  data(){
    return{
        height:300,
        imageList:[
            {
                id:1,
                url:require('../images/bg_slide2.jpg')
            },
            {
                id:2,
                url:require('../images/bg_slide3.jpg')
            },
            {
                id:3,
                url:require('../images/bg_slide2.jpg')
            }
        ],
        guarantee:[
            {
                url: require('../images/microphone.png'),
                title:"先进设备",
                content:"设施完备，设备先进，为他们提供了最大化的日常生活便利。"
            },
            {
                url:require('../images/169-hammer2.png'),
                title:"专业团队",
                content:"拥有多位教学经验丰富的A级宠物美容老师和注册宠物兽医师任教"
            },
            {
                url:require('../images/appliances.png'),
                title:"优质宠物用品",
                content:"涉及囊括了宠物食品、医疗保健品、洗护用品、用品用具、窝包服饰、宠物玩具、美容工具等"
            }
        ],
        crew:[
            {
                name:"张三",
                url: require('../images/image4-500x320.jpg'),
                presentation:"执业兽医师，国际认证资深宠物美容导师。"
            },
            {
                name:"李四",
                url: require('../images/image1-500x320.jpg'),
                presentation:"B级美容师，注册兽医师，理论与实践经验丰富。"
            },
            {
                name:"王五",
                url: require('../images/image5-500x320.jpg'),
                presentation:"A级宠物美容师，擅长泰迪的各种造型。"
            },
            {
                name:"小黄",
                url: require('../images/image6-500x320.jpg'),
                presentation:"宠物医院主诊，宠物美容培训中心讲师。"
            }
        ]
    }
  },
  components: {
      // eslint-disable-next-line vue/no-unused-components
      Nav
  },
    methods:{
      setBannerH(){
          this.height  = document.body.clientWidth/4;
      }
    },
    mounted() {
      this.setBannerH();
      window.addEventListener('resize',()=>{
          this.setBannerH()
      },false)
    },
    created() {
    }
}
</script>
<style>
    .advertising{
        height: 28px;
        color: #ffffff;
        display: flex;
        background-color: #f1ad48;
        padding: 40px 120px;
        align-items: center;
        justify-content: space-between;
    }
    .el-button--info.is-plain{
        font-size: 28px;
        border-color:#ffffff!important;
        background-color:#f1ad48!important;
    }
    .wallpaper{
        background-color: #fbfbfb;
    }
    .title{
        display: flex;
        padding-top: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .carousel-bg{
        display: flex;
        flex-wrap: wrap;
        padding: 60px 0px;
        justify-content: center;
        background-image:url("../images/b1.jpg");
        background-repeat:no-repeat;

    }
    .variety{
        background-color: #f1ad48;
        color: #fff;
        padding: 108px 27px;
    }
    .flaunt{
        height: 500px;
        width: 700px;
        background: white;
    }
    .Introduction{
        padding: 40px;
    }
    .team{
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around;

    }
    .each{
        margin-top: 35px;
        width: 300px;
    }
    .emptyElement{
        color:#f1ad48;
        font-weight: 300;
        font-size: 21px
    }
    .emptyElement:after {
        content:'';
        display:block;
        width:30px;
        border-top:2px solid #505050;
        -webkit-transition:width .4s ease;
        -o-transition:width .4s ease;
        transition:width .4s ease;
        margin:20px auto;
    }
    .emptyElement:hover::after{
        width: 50px;
    }
    .commercial{
        background-image:url("../images/b2.jpg");
        background-repeat:no-repeat;
        background-size: 100% 100%;
    }
    .personnel{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 30px 60px 0px 60px;
    }
    .dim{
        opacity:0.6; filter: alpha(opacity=60);
    }
    .through:hover{
        background-color:rgba(0,0,0,.4);
    }
    .aboutUs{
        height: 300px;
        background-color: #f1ad48;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .understand{
        margin: 0px 30px;
        padding: 20px;
        color: white;
        font-size: 28px;
    }
    .understand p{
        font-size: 18px;
        margin-right: 30px;
    }
</style>
